<!-- 折叠容器 -->
<template>
  <div class="collapse_div" :class="{ isPosition: isPosition, hide: isOpen }">
    <slot></slot>
    <button
      v-if="isPosition"
      class="collapseBtn"
      :class="{
        btn_show: isOpen,
        btn_hide: !isOpen,
      }"
      type="button"
      @click="isOpen = !isOpen"
    >
      <el-icon color="#fff" v-show="!isOpen"><ArrowLeft /></el-icon>
      <el-icon color="#fff" v-show="isOpen"><ArrowRight /></el-icon>
    </button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
defineProps({
  // 是否浮动  默认true
  isPosition: {
    type: Boolean,
    default() {
      return true
    },
  },
  // 宽度  默认350px
  width: {
    type: String,
    default() {
      return '350px'
    },
  },
})

const isOpen = ref(false)
</script>

<style lang="scss" scoped>
.collapse_div {
  width: 350px;
  height: 100%;
  padding: 10px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #a9c4df;
  // position: relative;
  transition: all 0.5s;
  box-sizing: border-box;
  float: left;
  .collapseBtn {
    cursor: pointer;
    width: 15px;
    height: 64px;
    position: absolute;
    right: -15px;
    top: calc(50% - 32px);
    z-index: 90;
    background-color: #4084f0;
    padding: 0;
  }
}
.collapse_div.isPosition {
  border-right: 1px solid #a9c4df;
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 90;
}
.collapse_div.hide {
  left: -350px;
}
</style>
